<template>
  <div class="row">
    <!-- 菜单 -->
    <div class="col-sm-12 col-md-8">
      <table class="table">
        <thead class="thead-default">
          <tr>
            <th>尺寸</th>
            <th>价格</th>
            <th>加入</th>
          </tr>
        </thead>
        <tbody v-for="item in getMenuItems" :key="item.name">
          <tr>
            <td><strong>{{item.name}}</strong></td>
          </tr>
          <tr v-for="option in item.options" :key="option.size">
            <td>{{option.size}}</td>
            <td>{{option.price}}</td>
            <td>
              <button 
                @click="addToBasket(item,option)"
                class="btn btn-sm btn-outline-success">+</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 购物车 -->
    <div class="col-sm-12 col-md-4">
    	<div v-if="baskets.length > 0">
	      <table class="table">
	        <thead class="thead-default">
	          <tr>
	            <th>数量</th>
	            <th>品种</th>
	            <th>价格</th>
	          </tr>
	        </thead>
	        <tbody>
	          <tr v-for="list in baskets" :key="list.name">
	            <td>
	              <button class="btn btn-sm" @click="minus(list)">-</button>
	              <span>{{list.quantity}}</span>
	              <button class="btn btn-sm" @click="add(list)">+</button>
	            </td>
	            <td>{{list.name}}{{list.size}}</td>
	            <td>{{list.price*list.quantity}}</td>
	          </tr>
	        </tbody>
	      </table>
	      <p>总价:{{total}}元 </p>
	      <button class="btn btn-success btn-block">提交</button>
      </div>
      <div v-else>购物车暂无数据</div>
    </div>

  </div>
</template>
<script>
	
  export default{
    data(){
      return{
        baskets:[],
//      getMenuItems:{}
      }
    },
    computed:{
    	getMenuItems(){
    		//从vuex中拿
//  		return this.$store.state.menuItems;
				//通过getters获取数据
    		return this.$store.getters.getMenuItems;
    	},
    	total(){
    		let totals=0;
    		for(let i in this.baskets){
    			totals+=(this.baskets[i].quantity)*(this.baskets[i].price);
    		}
    		return totals;
    	}
    },
    created(){
//  	this.$http.get("menu.json").then((res)=>{
//  		console.log(res.data)
//  		this.getMenuItems=res.data;
//  	})
			//使用vuex进行存储
			this.$http.get("menu.json").then((res)=>{
    		this.$store.commit("setMenuItems",res.data);
    	})
			
    },
    methods:{
      addToBasket(item,option){
      	let basket={
        	name:item.name,
        	size:option.size,
        	price:option.price,
        	quantity:1
       };
       if(this.baskets.length > 0){//假如购物车里面有添加的商品
       	//过滤
       	let result=this.baskets.filter((basket) => {
       		//对里面的内容进行去重
       		return (basket.name == item.name && basket.price == option.price);
       	})
       	if(result !=null && result.length>0){
       		result[0].quantity++;
       	}else{
       		this.baskets.push(basket);
       	}
       	
       }else{
       	this.baskets.push(basket);
       }
        
      },
      add(list){
      	list.quantity++;
      },
      minus(list){
      	list.quantity--;
      	if(list.quantity <= 0){
      		//将这一条数据删除
      		this.baskets.splice(this.baskets.indexOf(list),1)
      	}
      }
      
    }
  }
</script>